Hexo + GitPages 搭建博客

发表于 | 分类于
字数统计: 1,781

前言

使用Hexo + GitPage 搭建个人博客
hexo是由Node.js驱动的一款快速、简单且功能强大的博客框架。

hexo搭建简单，配合markdown的使用，更加便捷的管理自己的学习文档。

为什么要选择GitHub Pages?

  1. GitHub Pages有免费的代码托管空间，资料自己管理，保存可靠；
  2. 学着用 GitHub，上面有很多大犇；
  3. 顺便理解 GitHub 工作原理，最好的团队协作流程；
  4. GitHub建立私有仓库才会收费，所以会有很多开源代码。

GitHub Pages是什么

使用GitHub Pages搭建属于自己的个人博客，GitHub会提供免费的空间和域名（用户名+github+io）。

搭建步骤

  • 系统环境配置
  • GitHub创建个人仓库
  • 推送网站
  • 绑定域名
  • 更换主题
  • 学习MarkDown
  • 发布文章
  • etc

系统环境配置

要使用Hexo，需要在你的系统中支持Git和Node.js，如果还没有，那就先安装吧。

安装Git

下载地址：https://git-scm.com/download/

安装 Node.js

Node.js下载地址

Node.js 安装配置教程

安装Hexo

可以选择一个自己喜欢的路径创建hexo，我的是安装装D:/hexo 下的。
cmd窗口切换到对应的目录。

1
2
3
4
5
$ cd d:/hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install

在D:/Hexo 下执行 hexo g
再执行： hexo s
然后在浏览器中打开 localhost:4000，就可以看到在本地已经安装好了。

常用的Hexo 命令

之后遇见陌生的指令可以在官方文档中查一查

Hexo指令
（科学上网）

1
2
3
npm install hexo -g #安装Hexo
npm update hexo -g #升级 
hexo init #初始化博客

命令简写

1
2
3
4
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

GitHub创建个人仓库

登陆到GitHub，如果没有账号，用邮箱注册就好：Join GitHub 点击GitHub中的New repository创建新仓库，仓库名应该为：用户名.github.io 这个用户名使用你的GitHub帐号名称代替，这是固定写法。

配置SSH

设置user.name和user.email

鼠标右键打开Git Bash

mark

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件
1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车，不需要设置密码

然后找到生成的.ssh文件夹中的id_rsa.pub密钥（记事本打开，将生成的密钥全部复制

mark

打开 GitHub_SSH_and_GPG_keys 页面, 新建 SSH key。

mark

将本地生成的密钥粘贴到Key框中，Titel随便填。

在Git Bash中检测GitHub公钥设置是否成功，输入 ssh git@github.com ：

mark

如上则成功。设置Git Hub私钥的原因是，当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。这样可以保证每次的推送都是正确合法的。

推送网站

目前仅仅只能在本地浏览，现在要做的就是推送网站，让我们的网站可以被更多人访问。

通过修改根目录的站点配置文件_config.yml

mark

打开_config.yml，拉到最下面修改为

mark

其中repo 一项 填入之前创建的仓库路径，在下图处复制即可，注意冒号后面有空格。

mark

保存站点配置文件

这一步是为hexo d 这个命令做相应的配置，告诉hexo你要把blog部署在哪，在这里我们部署在我们的GitHub仓库里。

最后安装Git部署插件，输入命令

1
npm install hexo-deployer-git --save

我们再分别输入三条命令

1
2
3
hexo clean
hexo g
hexo s

hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

hexo g 

就是部署网站命令，d是deploy的缩写。

完成后，在浏览器中输入你的仓库路径,xxxxx.github.io（xxxxx就是你的GitHub用户名）

这样你的博客就上线啦！

绑定域名

首先需要获取一个域名

我还没选好。。

推荐阿里云
阿里云域名注册

更换主题

Hexo默认的主题有点丑，我们可以更换不同的主题，可以在这个链接中选择Hexo/Themes。

我使用的是Next主题，用这个的人挺多的。在blog目录中打开命令行输入

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

将Next主题下载到blog目录的themes里的next文件夹中。打开站点配置文件_config.yml，修改 

theme: next

mark

再次部署网站

1
2
hexo g
hexo d

打开博客可以看看效果，选择的其他主题，参考上述过程也能实现，更多的美化。。。。

发布文章

1
hexo new "文章标题"

在博客文件夹 source\_posts 文件夹下看到我们新建的 markdown 文件。

我们也可以将写好的Markdow文件放在source\_posts 文件夹下，效果和 hexo n是一样的。

文章编辑好后，执行以下命令。

1
2
3
hexo clean 
hexo g
hexo d

etc

设置中文

默认语言是英文，修改 站点_config.yml 的language字段

mark

NexT 目前支持八种语言版本：

语言 对应值
English en
简体中文 zh-Hans
法语 fr-FR
繁体中文 zh-hk/zh-tw
俄语 ru
德语 de
葡萄牙语 pt
日语 ja

创建“关于”页面

新建一个 about 页面：

1
hexo new page "about"

菜单显示 about 链接

在主题的 _configy.yml 中将 menu 中 about 前面的注释去掉即可。

1
2
3
4
5
menu:
  home: /
  archives: /archives
  tags: /tags
  about: /about

创建分类页面

添加 分类 页面，并在菜单中现实页面链接。

新建一个 “categories” 页面

1
hexo new page categories

编辑新建的页面，将页面类型设置为 categories

title: 分类

date: 2018-02-01 20:39:19

type: “categories”

-–

###在菜单中添加链接

编辑主题的 _configy.yml 中将 menu 中 categories 前面的注释去掉即可。

1
2
3
4
5
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

###中文乱码问题

在博客搭建过程中，我的博客描述出现了中文乱码的情况

mark

因为_config.yml文件我一直用记事本编辑，因为记事本不会自己UTF-8转码，用记事本打开，另存为->编码选UTF-8，保存即可。使用sublime text编辑就不会出现了。

头像设置

  1. 打开主题_config.yml文件(themes/next/_config.yml)
  2. 搜索avatar,去掉注释符号，把后面改成头像的连接地址，可以是两种形式。
地址 值
完整的互联网URL http://example.com/avtar.png
站点内的地址 将头像放置主题目录下的 source/uploads/ （新建uploads目录若不存在） 配置为：avatar: /uploads/avatar.png 或者放置在 source/images/ 目录下 配置为：avatar: /images/avatar.png